/**
 * 实现一个登录拦截的功能。
 *    ReactRouterDOM 中，没有路由守卫的功能。如果需要做这种类于路由守卫的功能的话，需要通过 PrivateRoute 的操作方式。
 *
 * 需求：
 *    1. /hello - Hello 组件，该页面是无需登录的
 *    2. /world - World 组件，该页面是需要登录的
 *    3. /login - Login 组件，该页面是无需登录的
 *
 * 方案:
 *    自行实现一个 PrivateRoute（私有路由）组件 来实现 Route 组件的功能，且包含着登录校验
 */

import { Route, Switch, Link, Redirect } from "react-router-dom";
import Login from "./components/Login";
import Hello from "./components/Hello";
import World from "./components/World";
import About from "./components/About";

const PrivateRoute = ({ path, component }: any) => {
  // 判断当前是否登录
  if (window.isLogin) {
    // 表示登录了, 直接 return <Route /> 组件
    return <Route path={path} component={component} />;
  } else {
    // 没有登录，直接 return 一个 Redirect 组件，该组件是做 重定向的。
    //    Redirect 只设置 to ，当匹配到这个组件，就会重定向
    //            可以多设置一个 from 属性，表示需要满足 from 设置的路径，才会重定向
    return <Redirect to={`/login?redirect=${path}`} />;
  }
};

function App() {
  return (
    <div>
      <h1>App</h1>
      <ul>
        <li>
          <Link to="/login">登录页面</Link>
        </li>
        <li>
          <Link to="/hello">Hello页面</Link>
        </li>
        <li>
          <Link to="/world?id=1&name=2">World页面 - 需要登录</Link>
        </li>
        <li>
          <Link to="/about">About页面 - 需要登录</Link>
        </li>
      </ul>

      <hr />
      <Switch>
        <Route path="/login" component={Login} />
        <Route path="/hello" component={Hello} />
        <PrivateRoute path="/world" component={World} />
        <PrivateRoute path="/about" component={About} />
      </Switch>
    </div>
  );
}

export default App;
